import React from 'react';
import ReactDOM from 'react-dom';
//import PropTypes from 'prop-types';
/**
 * 受控组件：
 * -- 表单项输入数据能自动集成到状态中
 * 非受控组件：
 * -- 需要时手动读取表单输入框中的数据
 * 下面例子中userName是非受控组件，password是受控组件
 */
class MyApp extends React.Component{
  constructor(props){
    super(props);
    this.state={
      pwd:''
    };
    this.handlerClick = this.handlerClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handlerClick(event){
    const userName = this.userName.value.trim();
    const {pwd} = this.state;
    alert(`用户名：${userName} ,密码：${pwd}`);
    event.preventDefault();
  }
  handleChange(event){
    //const pwd = event.target.value
    this.setState({pwd:event.target.value});
    //event.preventDefault();
  }
    render(){
        return(
            <form>
                <label>用户名：</label>
                <input type="text"  ref={input => this.userName = input}/> 
                <label>密码：</label>
                <input type="password" value={this.state.value} onChange={this.handleChange}/> 
                <input type="submit" value="提交" onClick={this.handlerClick}/>
            </form>
        );
    }
}
ReactDOM.render(<MyApp /> , document.getElementById('root'));